import React, { useEffect, useState } from 'react';
import LocationImage from '@/components/LocationImage';
import { SearchOutlined } from '@ant-design/icons';
import './index.less';
import Layouts from '@/components/Layout';
import { Typography, Pagination, Divider, Input, Spin, Empty } from 'antd';
import { getCitiesList } from '@/service/api/location';
import { CitiesList, CitiesSearch } from '@/types/loaction';
const Cities: React.FC = () => {
  const [citiesData, setCitiesData] = useState<CitiesList[]>([]);
  const [searchCname, setSearchCname] = useState<string>('');
  const [listTotal, setListTotal] = useState<number>(0);
  const [listLoading, setListLoading] = useState<boolean>(false);
  const [citiesListSearchQuery, setCitiesListSearchQuery] = useState<CitiesSearch>({
    pageNum: 1,
    pageSize: 9,
    cname: '',
  });
  const getCitiesListData = async () => {
    try {
      setListLoading(true);
      const { rows, total }: { rows: CitiesList[]; total: number } = await getCitiesList(
        citiesListSearchQuery,
      );
      setCitiesData(rows);
      setListTotal(total);
    } finally {
      setListLoading(false);
    }
  };
  function handleChangePage(page: number, pageSize: number) {
    setCitiesListSearchQuery({
      pageNum: page,
      pageSize,
      cname: searchCname,
    });
  }
  useEffect(() => {
    getCitiesListData();
  }, [citiesListSearchQuery]);
  const onSearch = (value: string) => {
    setSearchCname(value);
    setCitiesListSearchQuery({
      pageNum: 1,
      pageSize: 9,
      cname: value,
    });
  };
  return (
    <Layouts>
      <div className="country_warpper">
        <div className="tit_wrapper">
          <Typography.Title level={2} style={{ marginBottom: 0 }}>
            城市
          </Typography.Title>
          <div className="sub_title">旅游信息和冒险理念</div>
          <div className="search_wrapper">
            <Input.Search
              placeholder="请输入城市名称"
              onSearch={onSearch}
              allowClear
              enterButton={
                <span>
                  <SearchOutlined style={{ marginRight: 6 }}></SearchOutlined>搜索
                </span>
              }
            />
          </div>
        </div>
        <Divider />
        <Spin tip="正在玩命加载..." size="large" spinning={listLoading}>
          <div className="data_wrapper">
            {citiesData.map((item) => (
              <LocationImage
                isCity
                id={item.id}
                key={item.id}
                cityName={item.cname}
                countryName={item.country}
                coverImg={item.imgUrl}
              ></LocationImage>
            ))}
          </div>
        </Spin>
        <div className="pagination_wrapper">
          {listTotal !== 0 && (
            <Pagination
              current={citiesListSearchQuery.pageNum}
              total={listTotal}
              showTitle
              pageSize={citiesListSearchQuery.pageSize}
              showSizeChanger={false}
              onChange={handleChangePage}
            />
          )}
          {!listLoading && listTotal === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
        </div>
      </div>
    </Layouts>
  );
};
export default Cities;
